{% extends "base/base.html" %}

{% block title %}客户最长最短商谈记录 - 项目合作归属数据管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2><i class="bi bi-bar-chart"></i> 客户最长最短商谈记录</h2>
        <p class="text-muted">统计指定时间段内客户的最长和最短商谈记录</p>
    </div>
</div>

<!-- 搜索表单 -->
<div class="search-form">
    <form method="GET" class="row g-3">
        <div class="col-md-4">
            <label class="form-label">开始时间 <span class="text-danger">*</span></label>
            <input type="date" class="form-control" name="start_date" value="{{ start_date }}" required>
        </div>
        <div class="col-md-4">
            <label class="form-label">结束时间 <span class="text-danger">*</span></label>
            <input type="date" class="form-control" name="end_date" value="{{ end_date }}" required>
        </div>
        <div class="col-md-4 d-flex align-items-end">
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-search"></i> 查询
            </button>
        </div>
    </form>
</div>

<!-- 统计结果表格 -->
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">统计结果</h5>
        <button class="btn btn-outline-primary btn-sm" onclick="exportStats()">
            <i class="bi bi-download"></i> 导出统计
        </button>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th rowspan="2" style="vertical-align: middle;">客户姓名</th>
                        <th rowspan="2" style="vertical-align: middle;">项目序号</th>
                        <th rowspan="2" style="vertical-align: middle;">线上商谈次数</th>
                        <th rowspan="2" style="vertical-align: middle;">线下商谈次数</th>
                        <th rowspan="2" style="vertical-align: middle;">总商谈次数</th>
                        <th colspan="5" class="text-center">最长商谈记录</th>
                        <th colspan="5" class="text-center">最短商谈记录</th>
                    </tr>
                    <tr>
                        <th>日期</th>
                        <th>类别</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>时长</th>
                        <th>日期</th>
                        <th>类别</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>时长</th>
                    </tr>
                </thead>
                <tbody>
                    {% for result in results %}
                    <tr>
                        <td>{{ result.customer_name }}</td>
                        <td>{{ result.project_number or '-' }}</td>
                        <td>{{ result.online_count }}次</td>
                        <td>{{ result.offline_count }}次</td>
                        <td>{{ result.total_negotiations }}次</td>
                        
                        <!-- 最长商谈记录 -->
                        <td>{{ result.longest_date }}</td>
                        <td>
                            {% if result.longest_category == '线上合作商谈' %}
                                <span class="badge bg-info">线上</span>
                            {% else %}
                                <span class="badge bg-warning">线下</span>
                            {% endif %}
                        </td>
                        <td>{{ result.longest_start_time }}</td>
                        <td>{{ result.longest_end_time }}</td>
                        <td>
                            <span class="text-success fw-bold">{{ "%.1f"|format(result.longest_duration / 60) }}小时</span>
                        </td>
                        
                        <!-- 最短商谈记录 -->
                        <td>{{ result.shortest_date }}</td>
                        <td>
                            {% if result.shortest_category == '线上合作商谈' %}
                                <span class="badge bg-info">线上</span>
                            {% else %}
                                <span class="badge bg-warning">线下</span>
                            {% endif %}
                        </td>
                        <td>{{ result.shortest_start_time }}</td>
                        <td>{{ result.shortest_end_time }}</td>
                        <td>
                            <span class="text-primary fw-bold">{{ "%.1f"|format(result.shortest_duration / 60) }}小时</span>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="15" class="text-center text-muted py-4">
                            {% if start_date and end_date %}
                                该时间段内暂无商谈记录
                            {% else %}
                                请选择查询条件后点击查询按钮
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{% if results %}
<!-- 汇总统计 -->
<div class="row mt-4">
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4>{{ results|length }}</h4>
                        <p class="mb-0">客户总数</p>
                    </div>
                    <div class="align-self-center">
                        <i class="bi bi-people-fill" style="font-size: 2rem;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="card bg-success text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4>{{ "%.1f"|format((results|map(attribute='longest_duration')|max or 0) / 60) }}</h4>
                        <p class="mb-0">全局最长时长(小时)</p>
                    </div>
                    <div class="align-self-center">
                        <i class="bi bi-arrow-up-circle-fill" style="font-size: 2rem;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="card bg-info text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4>{{ "%.1f"|format((results|map(attribute='shortest_duration')|min or 0) / 60) }}</h4>
                        <p class="mb-0">全局最短时长(小时)</p>
                    </div>
                    <div class="align-self-center">
                        <i class="bi bi-arrow-down-circle-fill" style="font-size: 2rem;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="card bg-warning text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4>{{ results|sum(attribute='total_negotiations') or 0 }}</h4>
                        <p class="mb-0">总商谈次数</p>
                    </div>
                    <div class="align-self-center">
                        <i class="bi bi-chat-dots-fill" style="font-size: 2rem;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
function exportStats() {
    // 导出统计数据
    alert('导出功能开发中...');
}
</script>
{% endblock %}